<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" />
	<title>白银dom考核</title>
	<style type="text/css">
		.add-main{
			width: 1000px;
			margin:20px auto 30px;
			border-bottom: 1px solid #dcdcdc;
			padding-bottom: 20px;
			overflow: hidden;
		}
		.commont-input{
			float: left;
			margin-left: 20px;
		}
		.commont-input select{
			width: 150px;
			height: 25px;
		}
		.common-btn{
			width: 100px;
			height: 30px;
			line-height: 30px;
			color: #fff;
			text-align: center;
			background: #44adfb;
			border:1px solid #44adfb;
			margin-left: 20px;
		}
		#table{
			width: 1000px;
			margin:0 auto;
			border:1px solid #dcdcdc;
			border-collapse:collapse;
		}
		#table thead td{
			height: 40px;
			line-height: 40px;
			background: yellow;
			color: #000;
			font-size:20px;
			font-weight: bold;
			border:1px solid #dcdcdc;
			text-align: center;
		}
		#table tbody td{
			height: 30px;
			line-height: 30px;
			text-align: center;
			border:1px solid #dcdcdc;
		}
		#table tfoot tr{
			height: 40px;
		}
		#table tfoot td input{
			width: 100px;
			height: 30px;
			line-height: 30px;
			background: #44ADFB;
			border:1px solid #44ADFB;
			border-radius: 4px;
			color: #fff;
			text-align: center;
			float: right;
			margin-right: 20px;
		}
	</style>
</head>
<body>
	<div class="add-main">
		<div class="commont-input">
			<span>姓名：</span>
			<select  id="userName"></select>
		</div>
		<div class="commont-input">
			<span>性别：</span>
			<select id="sex"></select>
		</div>
		<div class="commont-input">
			<span>年龄：</span>
			<select id="age"></select>
		</div>
		<div class="commont-input">
			<span>组名：</span>
			<select id="group"></select>
		</div>
		<input  type="button" value="添加组员" id="J_addPerson" class="common-btn"/>

	</div>
	<table id="table">
		<thead>
			<tr>
				<td> 选择 </td>
				<td>姓名</td>
				<td>性别</td>
				<td>年龄</td>
				<td>组名</td>
				<td>操作</td>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td> <input type="radio" /> </td>
				<td>杨老湿</td>
				<td>男</td>
				<td>18</td>
				<td>无组</td>
				<td>
					<input type="button" value="删除" class="btn-delete"/>
				</td>
			</tr>

		</tbody>
		<tfoot>
			<tr>
				<td colspan="6">
					<input type="button" value="选中删除" id="J_deleteRemove" />
					<input type="button" value="全选" id="J_radio"/>
					<input type="button" value="取消全选" id="J_removeRadio"/>
				</td>
			</tr>
		</tfoot>
	</table>


</body>
</html>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
	$(function(){
		ajaxClass();
		//添加功能
		$('#J_addPerson').on('click',function(){
			//获取用户名
			var nd_name = $('#userName').val().trim();
			//获取性别
			var nd_sex = $('#sex').val().trim();
			//获取年龄
			var nd_age = $('#age').val().trim();
			//获取组别
			var nd_group = $('#group').val().trim();
			var html = "<tr>";
			if(nd_name != "" && nd_sex != "" && nd_age != "" && nd_group != ""){
				html += "<td> <input type=\"radio\" /> </td>"
					+"<td>"+nd_name+"</td>"
					 + "<td>"+nd_sex+"</td>"
					 + "<td>"+nd_age+"</td>"
					 +"<td>"+nd_group+"</td>"
					 +"<td>"
						+"<input type=\"button\" value=\"删除\" class=\"btn-delete\"/>"
					+"</td>";
					+"</tr>";
			}
			$("#table tbody").append(html);

		})

		//删除功能
		$("#table").on('click','.btn-delete',function(){
			$(this).parents('tr').remove();
		})
		//关闭
		$("#J_close").on('click',function(){
			$('.layer-main').hide();
		})
		//全选
		$('#J_radio').on('click',function(){
			$("input[type='radio']").prop('checked','checked');
		})
		//取消全选
		$("#J_removeRadio").on('click',function(){
			$("input[type='radio']").prop('checked',false);
		})
		//选中删除
		$("#J_deleteRemove").on('click',function(){
			var nd_allRadio = $("input[type='radio']");
			for(var i=0;i<nd_allRadio.length;i++){
				if($(nd_allRadio[i]).prop('checked')){
					$(nd_allRadio[i]).parents('tr').remove();
				}
			}
		})
	})
	//那数据渲染
	function ajaxClass(){
		$.ajax({
			type:'get',
			url:'class.json',
			success:function(resp){
				var data = resp.data;
				var first = resp.data.first;
				var second = resp.data.second;
				var third = resp.data.third;
				var fourth = resp.data.fourth;
				handleJson(first,0);
				handleJson(second,0);
				handleJson(third,0);
				handleJson(fourth,0);
				handleJson(resp.data.sex,1);
				handleJson(resp.data.age,2);
				handleJson(resp.data.group,3);
			}
		})
	}
	//拼接人员信息
	function  handleJson(json,type){
		var html ="";
		for(var i=0;i<json.length;i++){
			if(type == 0){
				html += "<option>"+json[i].name+"</option>";
			}else{
				html += "<option>"+json[i]+"</option>";
			}
			
		}
		$(".commont-input").eq(type).find('select').append(html);
	}
</script>